<template>
    <view class="content bg_com">
        <view class="header col_center">
            <view class="icon">
                <image class="img_val"
                       src="../../../static/jb_sd.png"
                       mode=""></image>
            </view>
            <view class="gold">
                {{ goldNum }}
            </view>
        </view>
        <!-- 选项 -->
        <view class="select_box">
            <view class="title row_center">
                <view class="txt">
                    请选择金额
                </view>
                <image class="hg"
                       src="../../../static/hg.png"
                       mode=""></image>
            </view>
            <!-- 选项 -->
            <view class="list row_center">
                <view class="_item col_conter"
                      :class="{'active': index == activeIndex}"
                      v-for="(item, index) in selList"
                      :key="index"
                      @click="changeIndex(item,index)">
                    <view class="top">
                        {{ item.prodName }}<text class="gold_txt"></text>
                    </view>
                    <view class="money">
                        ￥ {{ item.money }}
                    </view>
                    <image v-if="index == activeIndex"
                           class="active_img"
                           src="../../../static/qb_checked.png"
                           mode="">
                    </image>
                </view>
            </view>
        </view>
        <!-- 提示 -->
        <view class="msg_box">
            <view class="title">
                温馨提示：
            </view>
            <view class="msg_item">
                1、顽皮不提倡未成年人用户进行充值，未成年人请在监护人的陪伴下操作，详见<text class="shu"
                      @click="goWebView(`http://www.daxiaomao.com/wanpi/static/teenager-protect/`)">《顽皮未成年人保护计划》</text>
            </view>
            <view class="msg_item">
                2、如支付遇到问题，请联系顽皮官方客服。
            </view>
            <view class="msg_item">
                3、切勿轻信刷单、低价充值等言论，谨防上当受骗。
            </view>
            <view class="msg_item">
                充值即表示同意<text class="shu"
                      @click="goWebView(`http://www.daxiaomao.com/wanpi/static/recharge-agreement/`)">《用户充值协议》</text>
            </view>
        </view>
		<view class="zw"></view>
        <!-- 底部 -->
        <view class="footer row_center">
            <view class="left">
                <text class="sgin">￥</text>{{ currentSelectData.money || 0}}
            </view>
            <view class="right"
                  @click="wxPay">
                <view class="btn_zf">
                    支付
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {
    mapState
} from 'vuex';
export default {
    computed: mapState(['hasLogin', 'identity']),
    data() {
        return {
            selList: [],
            activeIndex: 0,
            currentSelectData: {},
            goldNum: 0,
        }
    },
    onShow() {
        this.getWallet()
    },
    onLoad(option) {
        // 获取产品充值列表
        this.getChargeprod();
        console.log('>>>>>>>>>>>>>>>>>', this.$store.state.user)
    },
    methods: {
        goWebView(url) {
            uni.navigateTo({
                url: `/pages/activeWebView/activeWebView?vurl=${url}`
            });
        },
        changeIndex(item, index) {
            this.activeIndex = index
            this.currentSelectData = Object.assign({}, item)
        },
        // 获取产品充值列表
        getChargeprod() {
            // #ifdef MP-WEIXIN
            let ver = wx.getAccountInfoSync();
            let appVersion = (ver.miniProgram.version != '') ? ver.miniProgram
                .version : '1.0.0';
            console.log(appVersion)
            // #endif
            this.$api.getChargeprod({
                "uid": this.identity.uid,
                "channel": "official_mini1",
                "channelType": 1,
                "appVersion": appVersion,
                "os": "Android"
            }).then(res => {
                if (res.code == 200) {
                    this.selList = res.data.chargeProdVos || [{}]
                    this.currentSelectData = res.data.chargeProdVos[0]
                    console.log(res);
                }
            })
        },
        // 微信支付
        wxPay() {
            let _this = this
            _this.$interactive.showLoading('加载中')
            this.$api.weChatMiniAppPay({
                openId: this.identity.openId,
                chargeProdId: this.currentSelectData.chargeProdId,
                uid: this.identity.uid,
            }).then(res => {
                _this.$interactive.hideLoading()
                if (res.code == 200) {
                    uni.requestPayment({
                        timeStamp: res.data.timeStamp,
                        nonceStr: res.data.nonceStr,
                        package: res.data.package,
                        paySign: res.data.paySign,
                        signType: res.data.signType,
                        success(result) {
                            console.log('>>>>>>>>>>>>>>>>>>>orderId', res.data.orderId)
                            _this.$interactive.toast('支付成功', '/static/success.png')
                        },
                        fail(res) {
                            if (res.errMsg !== 'requestPayment:fail cancel') {
                                _this.$interactive.toast('支付失败', '/static/close.png')
                            }
                            console.error('支付失败', res)
                        },
                        complete(res) {
                            console.error('支付完成', res)
                        }
                    })
                } else {
                    _this.$interactive.toast('支付失败', '/static/close.png')
                }
            }).catch(err => {
                _this.$interactive.hideLoading()
                _this.$interactive.toast('支付失败', '/static/close.png')
            })
        },
        /* 获取我的钱包 */
        getWallet() {
            this.$api.getWallet({
                uid: this.identity.uid
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // this.diamondNum = res.data.diamondNum;
                    this.goldNum = res.data.goldNum;
                }
            })
        }

    }
}
</script>

<style lang="scss">
@import "./index.scss";
</style>
